<template>
  <div id="app">
    <!-- 路由的出口 -->
    <!-- <transition :name="slide-fade"> -->
      <keep-alive >
          <router-view v-if="$route.meta.keepAlive"></router-view>
      </keep-alive>
      <router-view v-if="!$route.meta.keepAlive"></router-view>
    <!-- </transition> -->
  </div>
</template>

<script>
import sysApi from '@/api/sysApi'
import constants from '@/config/constants'

export default {
  name: 'App',
  data () {
    return {
    }
  },
  created () {
    //获取订单配置
    this.getOrderSetting();
  },
  methods: {
    /* 获取订单配置 */
    getOrderSetting () {
      sysApi.orderSetting().then(result => {
        if(result.code == constants.SUCCESS){
          this.$store.commit(constants.STORE.SET_ORDER_SETTING, result.data);
        }
      })
    }
  }
}
</script>

<style lang="scss">
/* 加载全局样式 */
@import 'styles/theme.scss';
@import 'styles/vant.scss';
@import 'styles/index.scss';

/* switch按钮样式 */
.van-switch{
  border: 1px solid rgba(196,196,196,.4) !important;
}

/* 上传图片样式 */
.van-image__error, .van-image__loading{
  background: none !important;
}

/* 骨架 */
.skeleton{
  background: #f6f6f6 !important;
  border-radius: 5px;
}

/* circle-bg */
.circle-bg{
  padding: 10px 15px;
  margin: 0 10px;
  margin-bottom: 7px;
  border-radius: 5px;
  background: #fff;
  .van-cell{
    padding-left: 0;
    padding-right: 0;
  }
}

/* form */
.field-title{
  font-size: 15px;
  font-weight: bold;
  margin-bottom: 15px;
}
.field-title.no-top{
  margin-top: 0px;
}

/* 商品 */
.goods-item{
  width: 140px;
  padding: 10px 10px 3px 10px;
  .van-image{
    display: flex;
    justify-content: center;
    margin-bottom: 0px;
    img{
      width: 140px;
      height: 140px;
    }
  }
  .title{
    font-size: 13px;
    color: #333;
    margin-top: 20px;
  }
  .info{
    display: flex;
    justify-content: space-between;
    padding: 10px 0px 0px 0px;
    color: #e1212b;
    .van-cell__title{
      display: flex;
      align-items: center;
    }
    .van-cell__value{
      display: flex;
      justify-content: flex-end;
      align-items: center;
      div{
        display: flex;
        align-items: center;
        .van-image{
          width: 20px !important;
          height: 20px !important;
          img{
            margin-bottom: 4px;
            width: 16px;
            height: 16px;
          }
        }
      }
    }
  }
}

/* 订单商品 */
.order-goods-item{
  display: flex;
  padding: 10px 0px;
  .van-image{
    margin-top: 2px;
    height: 72px !important;
    width: 72px !important;
  }
  .preview-img{
    margin-top: 2px;
    height: 72px;
    width: 72px;
  }
  .goods{
    flex: 1;
    display: flex;
    flex-direction: column;
    margin-left: 12px;
    .title{
      height: 36px;
      font-size: 13px;
      color: #333;
      margin-bottom: 5px;
    }
    .num{
      height: 14px;
      font-size: 12px;
      color: #999;
      margin-bottom: 5px;
      display: flex;
      justify-content: space-between;
      align-items: center;
    }
    .price.skeleton{
      height: 15px;
    }
    .price{
      font-size: 13px;
      color: #E50808;
      position: relative;
      display: flex;
      justify-content: space-between;
      align-items: center;
      em{
        font-style: normal;
        margin-right: 2px;
      }
      .btn{
        height: 30px;
        padding: 0 10px;
        font-size: 12px;
        border-radius: 5px;
      }
      .sale{
        color: #999;
        font-size: 12px;
      }
    }
  }
}

/* 优惠券 */
.coupon-item{
  height: 100px;
  background: url('') no-repeat;
  background-size: 100% 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  .base-info{
    display: flex;
    flex-direction: column;
    margin-left: 15px;
    position: relative;
    top: -5px;
    .price{
      .prefix{
        color: #4f3a1e;
        font-size: 12px;
      }
      .num{
        color: #4f3a1e;
        font-weight: bold;
        font-size: 26px;
      }
      .tip{
        color: #4f3a1e;
        font-size: 12px;
        margin-left: 5px;
      }
    }
    .other{
      margin-top: 2px;
      color: #a8700d;
      font-size: 12px;
      em{
        font-style: normal;
        margin: 0px 5px;
      }
    }
  }
  .btn-info{
    margin-right: 20px;
    display: flex;
    align-items: center;
    flex-direction: column;
    .van-button{
      height: 30px;
      padding: 0 10px;
      font-size: 12px;
      border-radius: 5px;
    }
    .num{
      color: #a8700d;
      font-size: 11px;
      margin-top: 10px;
      em{
        font-style: normal;
        margin: 0 2px;
      }
    }
  }
}

/* 状态提示 */
.status-tip-box{
  position: fixed;
  top: 0px;
  left: 0;
  z-index: 2;
  height: 54px;
  width: calc(100% - (10px) * 2) !important;
  background: #f0f0f0;
  margin: 0 10px;
}
.status-tip.van-cell{
  color: #333;
  top: 5px;
  border-radius: 5px;
  .edit{
    color: #a8700d;
  }
  .num{
    margin: 0 5px;
    color: #a8700d;
  }
}

/* 返回按钮 */
.nav-back{
  display: flex;
  align-items: center;
  margin-left: 10px;
  font-size: 22px;
}

/* 未登录 */
.not-login {
  height: 160px;
  background: url("") no-repeat;
  background-size: cover;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  .mobile-box{
    width: 90px;
    height: 90px;
    background: #fff;
    border-radius: 50%;
    display: flex;
    justify-content: center;
    align-items: center;
    .mobile {
      width: 50px;
      height: 50px;
    }
  }
  .text {
    margin-top: 5px;
    font-size: 14px;
    color: #fff;
  }
}
.cart-login {
  margin-top: 80px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  .mobile {
    width: 60px;
    height: 60px;
  }
  .text {
    margin-top: 10px;
    font-size: 14px;
    color: #999;
  }
}

.address-box{
  background: #fff;
  display: flex;
  align-items: center;
  padding-top: 15px;
  padding-bottom: 15px;
  .receive-info{
    background-color: #fff;
    border-radius: 10px;
    display: flex;
    flex-direction: column;
    flex: 1;
    .empty{
      display: flex;
      align-items: center;
      height: 41px;
      font-size: 14px;
      color: #323233;
      .van-icon{
        margin-right: 10px;
      }
    }
    .phone-box.skeleton{
      height: 20px;
    }
    .phone-box{
      color: #333;
      font-size: 15px;
      margin-bottom: 5px;
      display: flex;
      align-items: center;
      .name{
        margin-right: 10px;
      }
      .default{
        margin-left: 10px;
        border-radius: 5px;
        padding: 0px 5px;
        background-color: #e9b461;
        display: flex;
        align-items: center;
        em{
          color: #fff;
          font-size: 12px;
          font-style: normal;
        }
      }
    }
    .address.skeleton{
      height: 17px;
    }
    .address{
      color: #999;
      font-size: 13px;
    }
  }
  .van-icon{
    width: 15px;
    color: #ccc;
    font-size: 20px;
  }
}
</style>
